import { useRef, useState } from "react";
// useRef作用1:react中是数据驱动的库，不推荐DOM操作，但是预留了DOM操作的入口就是ref
// useRef作用2：因为ref是引用数据类型，可以保存指定的值，该值不会因为组件重新渲染而丢失，同时该值的修改也不会触发组件重新渲染
// const 变量名 = userRef(null)  <input ref=(变量名)></input>
// ref在jsx的变量要和声明的变量保持一致
const Reference = () => {
  const [text, useText] = useState("");
  const ref = useRef<number>(0);
  const handleClick = () => {
    console.log(userNameRef.current.value);
    useText(userNameRef.current.value);
    userNameRef.current.value = "";
    ref.current += 1;
    alert(ref.current);
  };
  const userNameRef = useRef<string>(null);
  return (
    <>
      <h1>Reference</h1>
      <div>
        <label htmlFor="userName"></label>
        <p>
          用户名：
          <input
            type="text"
            id="userName"
            ref={userNameRef}
            placeholder="请输入用户名"
          />
        </p>
        <p>
          <button onClick={handleClick}>点击</button>
        </p>
        输入框文本：{text}
      </div>
    </>
  );
};

export default Reference;
